<template>
    <el-dialog :title="title + '故障提醒通知'" :visible.sync="dialogVisible" width="530px" @close='close'
        :close-on-click-modal='false'>
        <div class="dialogBody">
            <el-form :inline="true" :model="form" :rules="rules" label-width="120px" size="mini" ref="form">
                <el-form-item label="时长(分钟)" prop="delayTime">
                    <el-input-number v-model="form.delayTime" controls-position="right" :min="0" size="mini"
                        placeholder="输入超过时长,默认为0"></el-input-number>
                </el-form-item>
                <el-form-item label="通知方式" prop="infoType">
                    <el-checkbox-group v-model="form.infoType">
                        <el-checkbox :label="0">微信</el-checkbox>
                        <el-checkbox :label="1">邮箱</el-checkbox>
                        <el-checkbox :label="2">AI语音</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="通知到人员" prop="infoUserId">
                    <el-select v-model="form.infoUserId" filterableplaceholder="请选择" multiple>
                        <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <span slot="footer" class="footer">
            <el-button size="mini" @click='dialogVisible = false'>取 消</el-button>
            <el-button type="primary" size="mini" @click="confirm">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import {
        mapState
    } from "vuex";
    import {
        noticeEdit
    } from '@/api/exceptionController'
    export default {
        data() {
            return {
                form: {
                    id: null,
                    delayTime: undefined,
                    infoType: [],
                    infoUserId: []
                },
                rules: {
                    infoType: [{
                        required: true,
                        message: '请至少设置一种通知方式',
                        trigger: 'change'
                    }],
                    infoUserId: [{
                        type: 'array',
                        required: true,
                        message: '请选择通知人员',
                        trigger: 'change'
                    }]
                },
                dialogVisible: false,
                title: '添加黄灯',
                enumTab: {
                    '0': '黄灯',
                    '1': '红灯'
                }
            }
        },
        computed: {
            ...mapState(["userList"]),
        },
        props: {
            searchForm: {
                type: Object,
                default: () => ({})
            }
        },
        methods: {
            open(payload) {
                const {
                    type,
                    active,
                    row
                } = payload
                switch (type) {
                    case 'add':
                        this.title = '添加' + this.enumTab[active]
                        break;
                    case 'edit':
                        const {
                            delayTime, infoType, infoUserId, id
                        } = row
                        this.title = '编辑' + this.enumTab[active]
                        this.$nextTick(() => {
                            this.form.id = id
                            this.form.delayTime = delayTime
                            this.form.infoType = infoType.split(',').map(Number)
                            this.form.infoUserId = infoUserId.split(',').map(Number)
                        })
                        break;
                }
                this.dialogVisible = true
            },
            close() {
                this.form.id = null
                this.$refs.form.resetFields()
            },
            noticeEditFn(data) {
                noticeEdit(data).then(res => {
                    if (res.code == 200) {
                        this.$emit('updateList')
                        this.dialogVisible = false
                        this.utils.showMsg('添加成功', 'success')
                    }
                })
            },
            //确定
            confirm() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        const jsonForm = JSON.parse(JSON.stringify(this.form))
                        jsonForm.delayTime = jsonForm.delayTime == undefined ? 0 : jsonForm.delayTime
                        jsonForm.infoType = jsonForm.infoType.toString()
                        jsonForm.infoUserId = jsonForm.infoUserId.toString()
                        this.noticeEditFn(Object.assign(this.searchForm, jsonForm))
                    } else {
                        return false;
                    }
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .el-form-item--mini.el-form-item {
        width: 90%;

        /deep/ .el-form-item__content {
            width: 60%;
        }

        .el-input-number--mini,
        .el-input--mini,
        .el-select {
            width: 100%;
        }
    }

    /deep/ .el-dialog__body {
        padding: 0px 20px 8px 20px;

        .dialogBody {
            padding-top: 18px;
        }
    }

    /deep/ .el-dialog__footer {
        text-align: center;

        .footer {
            .el-button--mini {
                padding: 7px 35px;
            }
        }
    }
</style>